<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
</head>
<body>
<div class="page-container">
    <div class=" float-e-margins">
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">展示列表</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">礼物添加</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <form action="" class="form-inline" data-url="">
                            <div class="form-group">
                                <label class="control-label" for="key">选项:</label>
                                <select id="key" class="form-control" name="key">
                                    <option value="">请选择</option>
                                    <option value="id">id</option>
                                    <option value="gift_name">礼物名</option>
                                    <option value="type">属性</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="control-label" for="value">输入:</label>
                                <input class="form-control" id="value" type="text" name="value">
                            </div>
                            <button type="button" class="btn btn-primary" id="eventQuery">查询</button>
                            <button type="button" onclick="location.replace(location.href);" class="btn btn-success ">刷新</button>
                        </form>
                        <table id="tb_departments"></table>
                    </div>
                    <div class=" tab-pane" id="tab-2">
                        <div class="ibox-content">
                            <form class="form-horizontal"  id="form"   data-url="/BoxGiftAdd" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="type">
                                        <span class="c-red">*</span>奖品类型：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <select class="form-control" name="type" id="type">
                                            <option value="1">普通礼物</option>
                                            <option value="2">道具</option>
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="gold_egg_id" value="18">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="prize_id">
                                        <span class="c-red">*</span>添加展示礼物：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <select class="form-control" name="prize_id" id="prize_id">
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="rate">
                                        <span class="c-red">*</span>概率：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="text" class="form-control" id="rate" value="" min="0" max="100" name="rate" placeholder="0--100">
                                    </div>
                                </div>


                                <div class="form-group">
                                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                                        <button class="btn btn-primary" type="button" onclick="commonSubmit(this)">添加
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    $(document).ready(function () {
        initTable();
        getGift(1);
    });

    function initTable() {
        $('#tb_departments').bootstrapTable({
            url: '/BoxGiftIndexData',         //请求后台的URL（*）
            dataField: "data",
            method: 'get',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: queryParams,//传递参数（*）
            showToggle: true,
            showRefresh: true,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showPaginationSwitch: true,
            minimumCountColumns: 2,             //最少允许的列数

            columns: [{
                field: 'gift_name',
                title: '礼物名称'
            }, {
                field: 'gift_url',
                title: '礼物图片',
                formatter: function (value, row, index) {
                    return '<img  src="' + row.gift_url + '" class="img-responsive" width="10%">';
                }
            },{
                field: 'rate',
                title: '概率',
                editable: {
                    type: 'text',
                    title: '概率',
                    validate: function (v) {
                        if (!v) return '不能为空';
                    }
                }
            },{
                field: 'dec',
                title: '描述'
            },{
                field: 'Button',
                title: '操作',
                events: operateEvents,
                formatter: operateFormatter
            }],
            onEditableSave: function (field, row, oldValue, $el) {
                //可进行异步操作
                $.ajax({
                    type: "get",
                    url: "/BoxGiftEdit",
                    data: row,
                    dataType: 'JSON',
                    success: function (re) {
                        if (re.code === 100) {
                            layer.msg(re.msg, {icon: 1, time: 2000});
                            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
                        } else {
                            layer.msg(re.msg,{icon: 2, time: 2000});
                        }
                    },
                    error: function () {
                        layer.alert('服务器开小差了',{icon: 2, time: 2000});
                    },
                    complete: function () {

                    }

                });
            }
        });
    }

    //得到查询的参数
    function queryParams(params) {
        params.offset = params.offset / params.limit + 1;
        params.key = $('#key').val();
        params.value = $('#value').val();
        params.gold_egg_id = 18;
        console.log(JSON.stringify(params));
        return params;
    }

    function operateFormatter(value, row, index) {
        return [
            '<button type="button"  class="TableDel btn btn-primary btn-sm" style="margin-right:15px;">删除</button>'
        ].join('');
    }

    window.operateEvents = {
        'click .TableDel': function (e, value, row, index) {
            // changeStatus('BoxGiftDel', row, this);
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: '/BoxGiftDel',
                data: {'id':row.id},
                success: function (re) {
                    if (re.code === 100) {
                        layer.msg(re.msg, {icon: 1, time: 2000});
                        $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
                    } else {
                        layer.msg(re.msg, {icon: 2, time: 2000});
                    }
                },
                error: function (data) {
                    console.log(data.msg);
                }
            });
        }
    };
    $('#type').change(function () {
        var type = $(this).val();
        getGift(type);
    });

    function getGift(type){
        console.log(type)
        $.ajax({
            type: 'get',
            dataType: 'json',
            url: '/BoxGiftDetail',
            data: {'type': type},
            success: function (re) {
                var htmlText = '';
                console.log(re);
                for(var i in re){
                  //  var obj = re[i];
//
                    if(type === 1){
                        htmlText+="<option value="+ re[i]['id']+">"+ re[i]['gift_name']+"</option>";
                    }

                    else
                        htmlText += '<option value="'+re[i]['id']+'">'+re[i]['prop_name'] +'</option>';
                }
                console.log(htmlText);
                $('#prize_id').html(htmlText);
            },
            error: function (data) {
                console.log(data.msg);
            }
        });
    }
    // 搜索按钮触发事件
    $(function () {
        $("#eventQuery").click(function () {
            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
        });

    });
</script>
</body>
</html>